<script setup>
const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
})
console.log(props.userId, '获取赞信息')
const list = ref([])
const tabs = [
  { id: 0, label: '文章' },
  { id: 1, label: '沸点' },
]
const activeTab = ref(-1)
function toggleTag(i) {
  activeTab.value = i
  switch (activeTab.value) {
    case 0:
      list.value = [
        {
          id: 1,
          title: `我的2024年终总结——不如摸鱼去`,
          summary: `这个名字来源于我非常喜欢的许嵩的专辑《不如吃茶去》。我希望自己能够偶尔脱离忙碌的生活，享受一些轻松的时光，不再日复一日地做马牛。同时，我也希望大家能够在自己的领域中，创造出属于自己的一片天地。`,
          cover: `https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800`,
          tags: [
            { id: 1, name: '前端' },
            { id: 2, name: '前端总结前端总结前端总结前端总结' },
          ],
          author: {
            id: 1,
            nickName: '不如摸鱼去',
          },
          articleMetric: {
            viewCount: 103,
            collectCount: 2,
            likeCount: 1,
            commentCount: 121,
          },
          isLike: true,
          isCollect: false,
          releaseTime: '2024-12-24',
        },
      ]
      break
    case 1:
      list.value = [
        {
          from: {
            nickName: '小红帽',
            avatar:
              'https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
            job: 'Android | Flutter',
            fansCount: 10,
            attentionCount: 20,
          },
          content:
            'Cursor高德MCP提示配置成功， 调用的时候 显示 API 调用失败：INVALID_USER_IP ， 有大佬知道这个怎么解决嘛',
          picList: [
            'https://p26-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/5f67bd9b5eb34b51be175793051cf12b~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rKJ6buY546L6LSw:q75.awebp?rk3s=f64ab15b&x-expires=1745982520&x-signature=CyR6db2N9odtFueg70TGqMk56%2FE%3D',
          ],
          club: [
            {
              id: 0,
              title: 'AICoding交流',
            },
          ],
          releaseTime: '2024-01-01',
          articleMetric: {
            viewCount: 103,
            collectCount: 2,
            likeCount: 1,
            commentCount: 121,
          },

          isLike: true,
        },
        {
          from: {
            nickName: '异常君',
            avatar:
              'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
            job: '后端研发',
            fansCount: 10,
            attentionCount: 20,
          },
          content:
            '百度推出的AI Agent“心响”APP是一款以“AI任务完成引擎”为核心的手机端超级智能体产品，旨在通过自然语言交互帮助用户实现复杂任务的拆解、动态执行与可视化结果交付。\n'
            + '\n'
            + '一、产品概述\n'
            + '定位“复杂任务超级AI”，用户“超级大脑”+“最强辅助”。基于文心大模型及多智能体。覆盖知识、旅游、学习办公等场景。\n'
            + '\n'
            + '二、核心功能\n'
            + '~ 智能拆解：分解复杂任务，追踪进度。\n'
            + '~ 资源协同：连接专家，精准执行。\n'
            + '~ 动态优化：动态调整策略，处理问题。\n'
            + '~ 旅游攻略：一句话生成攻略，地图可视化。\n'
            + '~ 智慧图表：生成10+图表，支持定时。\n'
            + '~ 定时任务：自动执行高频任务。\n'
            + '~ 恋爱挑战：拆解社交，对话练习。\n'
            + '\n'
            + '三、产品优势\n'
            + '~ 生态整合：对接百度内部资源。\n'
            + '~ 合规性：基于备案文心模型，国内运营稳健。\n'
            + '~ 个性化定制：自由打造AI形象。\n'
            + '\n'
            + '四、市场前景与挑战\n'
            + '~ 市场前景：AI Agent应用广泛，有望占位。\n'
            + '~ 挑战：同质竞争，商业化待探索，需技术与差异化。\n'
            + '\n'
            + '五、用户反馈与期待\n'
            + '~ 用户反馈：获关注认可，功能强大便捷。\n'
            + '~ 用户期待：优化功能，拓展场景，加强安全隐私。',
          picList: [
            'https://p26-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/5f67bd9b5eb34b51be175793051cf12b~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rKJ6buY546L6LSw:q75.awebp?rk3s=f64ab15b&x-expires=1745982520&x-signature=CyR6db2N9odtFueg70TGqMk56%2FE%3D',
            'https://p3-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/c918a1b3699e4f6ea62e76fcef4db6d8~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byC5bi45ZCb:q75.awebp?rk3s=f64ab15b&x-expires=1745984372&x-signature=piqOOJRQS%2B5i5Y9i3z6OXlAMfKA%3D',
          ],
          club: [
            {
              id: 0,
              title: '今日新鲜事',
            },
          ],
          releaseTime: '16分钟前',
          articleMetric: {
            viewCount: 103,
            collectCount: 2,
            likeCount: 1,
            commentCount: 121,
          },
          isLike: true,
        },
      ]
      break
  }
}
onMounted(() => {
  toggleTag(0)
})
</script>

<template>
  <div class="min-h-500 px-8">
    <div class="flex justify-between px-8 font-size-14">
      <span class="fw-black"> 赞 </span>
      <div class="op-text">
        <span
          v-for="tab in tabs"
          :key="tab.id"
          class="cursor-pointer line-height-100% us"
          :class="{ 'color-primary': activeTab === tab.id }"
          @click="toggleTag(tab.id)"
        >
          {{ tab.label }}
          <el-divider v-if="tab.id < tabs.length - 1" direction="vertical" />
        </span>
      </div>
    </div>
    <el-divider />
    <div>
      <div v-if="activeTab === 0">
        <template v-for="(item, index) in list" :key="index">
          <ArticleItem :item-info="item" show-comment-count>
            <template #author>
              <span>{{ item.author.nickName }}</span>
              <el-divider direction="vertical" />
              <span>{{ item.releaseTime }}</span>
            </template>
          </ArticleItem>

          <el-divider v-if="index < list.length - 1" />
        </template>
      </div>
      <div v-if="activeTab === 1">
        <template v-for="(item, index) in list" :key="index">
          <ContentCard :item="item" />
        </template>
      </div>
      <el-empty
        v-if="list.length === 0"
        description="这里什么也没有"
        class="us"
      />
    </div>
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
  opacity: 0.5;
}
</style>
